<template>
    <!-- Popup -->
    <div id="popup-vedio" class="ol-popup">
        <a href="#" id="popup-closer" class="ol-popup-closer" @click="handleCloseClick"></a>
        <div id="popup-content">
            <video class="fullscreenVideo" id="bgVid" playsinline="true" autoplay="true" muted="true" loop="true">
                <source src="../../data/japan 3.mp4" type="video/mp4">
            </video>
            <h2>地址:{{ location_popup }}</h2>
        </div>
    </div>
</template>

<script setup>
import { ref, watch, onMounted, inject } from 'vue'
import { useMenuStore } from '../../store';
import { query } from '../../utils/query';

const location_popup = ref("")
let $map = null
let menuStore = useMenuStore();
let showPop = ref(false)
let currentPop = null
let container = null
let content = null
let closer = null
let popup = null
onMounted(() => {
    $map = inject("$map")
    init()

})
function createPopup() {
    container = document.getElementById('popup-vedio');
    content = document.getElementById('popup-content');
    popup = new ol.Overlay({
        //要转换成overlay的HTML元素
        element: container,
        //当前窗口可见
        autoPan: true,
        //Popup放置的位置
        positioning: 'top-left',
        offset: [450, -200],
        //是否应该停止事件传播到地图窗口
        stopEvent: true,
        autoPanAnimation: {
            //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
            duration: 50,
        },

    })
    $map.addOverlay(popup)
    $map.on("click", handleClick)
}
function handleClick(evt) {
    let position = evt.coordinate
    const service = {
        name: 'guanggu',
        layerId: 3
    }
    query({
        position,
        service,
        callback: res => handleQuery(position, res)
    })

}
function handleQuery(position, res) {

    if (res.TotalCount > 0) {


        location_popup.value = res.SFEleArray[0].AttValue[2];
        console.log('deoaldf', popup.element);

        popup.setPosition(position)

    } else {
        popup.setPosition(undefined);
    }
}
function handleCloseClick() {
    popup.setPosition(undefined);
    return false
}
function init() {

    let auth = (menuStore.activeIndex === '1' && (menuStore.userType == "admin" || menuStore.userType == "traffic"))
    if (auth) {
        createPopup()
    }
}
watch(
    () => menuStore.activeIndex,
    (val) => {
        let auth = (val === '1' && (menuStore.userType == "admin" || menuStore.userType == "traffic"))
        if (auth) {
            createPopup()
            console.log(val)
        } else {
            $map.un("click", handleClick)

            popup?.setPosition(undefined);
        }
    }
)


</script>

<style lang="scss" scoped>
// #popup-vedio {
//     display: none;
// }

.ol-popup {
    position: absolute;
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    width: fit-content;
    text-wrap: nowrap;
    left: -500px;

    #popup-content {
        padding: 15px;
        height: 150px;
        width: 200px;
    }
}

.ol-popup:after,
.ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: ' ';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
}

.ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
}

.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}

.ol-popup-closer:after {
    content: '✖';
}

#popup-content {
    font-size: 14px;
    font-family: '微软雅黑';
}

#popup-content img {
    width: 30px;
}
</style>